<template>
    <div class="docker">
        <div v-for="(item, index) in dockerList" :key="index" class="docker__item" :class="{'docker__item': true, 'docker__item--active': index === currentIndex}">
            <router-link :to='item.to'>
                <div class="iconfont" v-html="item.icon"></div>
                <div class="docker__title">{{item.text}}</div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Docker',
  props: ['currentIndex'],
  setup () {
    const dockerList = [
      { icon: '&#xe7d4;', text: '首页', to: { name: 'Home'} },
      { icon: '&#xe6e6;', text: '购物车', to: { name: 'CartList'} },
      { icon: '&#xe645;', text: '订单', to: { name: 'OrderList'} },
      { icon: '&#xe75e;', text: '我的', to: { name: 'Home'} }
    ]
    return {
      dockerList
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../style/viriables.scss';
.docker {
    display: flex;
    box-sizing: border-box;
    position: absolute;
    padding: 0 .18rem;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    color: $content-fontcolor;
    &__item {
        flex: 1;
        text-align: center;
        a {
            color: $content-fontcolor;
            text-decoration: none;
        }
        .iconfont {
            margin: .07rem 0 .02rem 0;
            font-size: .18rem;
        }
        //--表示状态
        &--active {
            a {
                color: #1FA4FC;
            }
            
        }
    }
    &__title {
        font-size: .2rem;
        transform: scale(.5, .5);
        transform-origin: center top;
    }
}
</style>
